<template>
  <div class="comNavBar">
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="$router.back()"
    >
      <template #right >
        <van-icon name="search" size="20" @click="showOverlay = true"/>
      </template>
    </van-nav-bar>
    <van-overlay :show="showOverlay" @click="showOverlay = false" class-name="over_layer">
      <van-cell-group class='layer'>
        <van-cell value="搜索"  @click="goNeedPage('search')"/>
        <van-cell value="查询"  @click="goNeedPage('query')"/>
      </van-cell-group>
    </van-overlay>
  </div>
</template>

<script>
  export default {
    name: 'comNavBar',
    props: {
      title: String,
      keyWord: String,
    },
    data(){
      return {
        showOverlay: false,
      }
    },

    methods: {
      goNeedPage(val){
        const keyWord = this.keyWord
        if (val === 'search'){
          this.$router.push({
            path: `/searchRecords/${keyWord}`,
          })
        } else {
          this.$router.push({
            path: `/queryRecords/${keyWord}`,
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .comNavBar{
    width: 100%;
    .over_layer{
      margin-top: 46px;
      height: 100%;
      .layer{
        width: 36%;
        font-size: 14px;
        position: absolute;
        right: 0;
        z-index: 2;
      }
    }
  }
</style>
